<template>
  <div class="responsive-component">
    <el-row :gutter="isMobile ? 10 : 20">
      <el-col :span="isMobile ? 24 : 12">
        <el-card>内容1</el-card>
      </el-col>
      <el-col :span="isMobile ? 24 : 12">
        <el-card>内容2</el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { isMobile } from '@/utils/device'

const mobile = ref(isMobile())

// 监听窗口大小变化
onMounted(() => {
  window.addEventListener('resize', () => {
    mobile.value = isMobile()
  })
})
</script>

<style lang="less" scoped>
.responsive-component {
  padding: 20px;

  @media screen and (max-width: @screen-sm) {
    padding: 10px;
  }
}
</style>